<template>
    <div class="container">
        <div class="row">
            <div
                v-for="(item, index) in firstRowItems"
                :key="index"
                :ref="setFirstRowRef"
                class="item"
                :class="[{ visible: item.isVisible }, { bg: index === 0 }]"
            >
                <div class="mt-50 img-container">
                    <a :href="`/${item.path}`"><img :src="item.image" :alt="item.text" /></a>
                </div>
                <h3>
                    <a :href="`/${item.path}`">{{ item.text }}</a>
                </h3>
                <p>{{ item.en }}</p>
            </div>
        </div>

        <div class="row">
            <div
                v-for="(item, index) in secondRowItems"
                :key="index"
                :ref="setSecondRowRef"
                class="item"
                :class="[{ visible: item.isVisible }, { bg: index === 1 }]"
            >
                <div class="mt-50 img-container">
                    <a :href="`/${item.path}`"><img :src="item.image" :alt="item.text" /></a>
                </div>
                <h3>
                    <a :href="`/${item.path}`">{{ item.text }}</a>
                </h3>
                <p>{{ item.en }}</p>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

const firstRowItems = ref([
    {
        image: require('@/assets/imgs/mg64.png'),
        text: '库存对照品',
        en: 'Stock List',
        path: 'stock',
        isVisible: false,
    },
    {
        image: require('@/assets/imgs/hi45.png'),
        text: '定制合成',
        en: 'Custom Synthesize',
        path: 'synthesis',
        isVisible: false,
    },
])

const secondRowItems = ref([
    {
        image: require('@/assets/imgs/9bob.png'),
        text: '代理品牌',
        en: 'Distributing Brand',
        path: 'brand',
        isVisible: false,
    },
    {
        image: require('@/assets/imgs/sx6i.png'),
        text: '氘代物标准品',
        en: 'Deuterium Reference Standards',
        path: 'stock',
        isVisible: false,
    },
])

const firstRowRefs = ref([])
const secondRowRefs = ref([])

const setFirstRowRef = (el) => {
    if (el) {
        firstRowRefs.value.push(el)
    }
}

const setSecondRowRef = (el) => {
    if (el) {
        secondRowRefs.value.push(el)
    }
}

const handleIntersection = (entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            const target = entry.target
            const index = target.dataset.index
            const row = target.dataset.row

            if (row === 'first') {
                firstRowItems.value[index].isVisible = true
            } else if (row === 'second') {
                secondRowItems.value[index].isVisible = true
            }
        } else {
            const target = entry.target
            const index = target.dataset.index
            const row = target.dataset.row

            if (row === 'first') {
                firstRowItems.value[index].isVisible = false
            } else if (row === 'second') {
                secondRowItems.value[index].isVisible = false
            }
        }
    })
}
onMounted(() => {
    const observer = new IntersectionObserver(handleIntersection, {
        root: null,
        rootMargin: '0px',
        threshold: 0.5,
    })

    firstRowRefs.value.forEach((el, index) => {
        el.dataset.index = index
        el.dataset.row = 'first'
        observer.observe(el)
    })

    secondRowRefs.value.forEach((el, index) => {
        el.dataset.index = index
        el.dataset.row = 'second'
        observer.observe(el)
    })
})
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    justify-content: space-around;
}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 430px;
    height: 250px;

    .img-container {
        opacity: 0;
        transform: translateY(100px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    a {
        text-decoration: none;
        color: #434343;
        font-size: 16px;

        &:hover {
            color: #47cdff;
        }
    }

    img {
        width: 90px;
        height: 90px;
        object-fit: cover;
        &:hover {
            transform: scale(1.1);
        }
    }
    p {
        margin-top: 10px;
        color: #999;
    }
}

.bg {
    background-color: rgb(229, 251, 255);
}

.item.visible {
    .img-container {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
